<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

    <base href="http://localhost:8686/estore/">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="css/fullCar.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/icons.css"/>
    <link rel="stylesheet" href="css/table.css"/>
    <script type="text/javascript">
        var sum = 0;

        function delShopCart(id) {
            window.location.href = "DelShopCartServlet?id=" + id;
            alert('订单已删除！');
        }

        function numAdd(id, n) {
            var num = document.getElementById("num" + n);
            num.value = parseInt(num.value) + 1;
            window.location.href = "UpdateShopCartServlet?id=" + id + "&num=" + num.value;
        }

        function numReduce(id, n) {
            //获取当前标签对象
            var num = document.getElementById("num" + n);
            if (num.value > 1) {
                num.value = parseInt(num.value) - 1;
            }
            window.location.href = "UpdateShopCartServlet?id=" + id + "&num=" + num.value;
        }

        function numChange(id, n) {
            var num = document.getElementById("num" + n);
            if (num.value < 0) {
                alert("输入数量不合法！");
            } else if (num.value > 10) {
                alert("对不起！每位用户限购10本！");
                window.location.href = "UpdateShopCartServlet?id=" + id + "&num=" + 10;
            } else {
                window.location.href = "UpdateShopCartServlet?id=" + id + "&num=" + num.value;
            }
        }

        function total(m, i, k) {
            let checks = document.querySelectorAll('input[type=checkbox]');
            var elementById = document.getElementById("check" + m);

            if (elementById.checked) {
                sum += i * k
                console.log(sum)
            } else {
                sum -= i * k

            }
            let
                n = 0;
            for (let i = 0; i < checks.length; i++) {
                if (checks[i].checked) {
                    n++
                }
            }
            document.getElementById("total").innerText = n
            document.getElementById("sum").innerText = sum

        }

    </script>
</head>
<body style=" background-color:rgb(244,244,244)">
<!--顶部-->
<div class="top">
    <div class="top_center">
        <ul class="top_bars">
            <li><a href="#"><font color="red"></font></a></li>
            <li><a href="login.jsp">退出</a>|</li>
            <li><a href="orders.jsp">我的订单<span class="jt_down"></span></a>|</li>
            <li><a href="index.jsp">关注工具人<span class="jt_down"></span></a>|</li>
            <li><a href="#">网站导航<span class="jt_down"></span></a></li>
        </ul>
    </div>
</div>
<!--头部-->
<div class="header3">
    <a href="index.jsp"><img src="images/log2.png" class="oneImg"></a>


    <div class="h3_right">
        <img src="images/play_01.png" alt="">
    </div>

</div>
<!--中间部分div-->
<div class="empty">
    <div class="peisong">
        <pre>全部商品  </pre>
    </div>
    <div class="mainCenter">
        <!-- 购物车为空，跳到首页 -->

        <div class="allCheck">
            <input type="checkbox">
            <p>全选</p>
            <p class="leftM">商品</p>
            <p class="rightM">单价(元)</p>
            <p class="leftM">数量</p>
            <p class="leftM">小计(元)</p>
            <p class="leftM">操作</p>
        </div>
        <div class="mainPro">
            <div class="aa">
                <input type="checkbox"><span id="but">自营</span>
            </div>
            <c:forEach items="${sessionScope.shopcar}" var="item" varStatus="stus">
                <div class="bb">
                    <input id="check${stus.index}" onclick="total(${stus.index},${item.num},${item.book.price})"
                           type="checkbox">
                    <img src="images/book_shopCart/${item.book.image}">
                    <span>
                    ${item.book.name}
	                    <br>
	                </span>
                    <div class="mm">
                        <span>¥ ${item.book.price}</span>
                    </div>
                    <div>
                        <dl>
                            <dd class="dd1" onclick="numReduce(${item.bookId},${stus.count})">-</dd>
                        </dl>
                        <input id="num${stus.count}" type="text" value="${item.num}"
                               onblur="numChange(${item.bookId},${stus.count})"/>
                        <dl>
                            <dd class="dd2" onclick="numAdd(${item.bookId},${stus.count})">+</dd>
                        </dl>
                    </div>
                    <div class="ri">¥${item.book.price*item.num}元</div>
                    <div class="righ">
                        <div class="rig" style="cursor: pointer;" onclick="delShopCart('1')">删除</div>
                    </div>
                </div>
            </c:forEach>

        </div>
        <div class="allButtom">
            <p class="caozuo"><a href="findAddressServlet">去结算</a></p>
            <span>已选择<font
                    id="total">0</font>件商品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总价(不含运费)：<font
                    id="sum">¥ 0元</font></span>
        </div>
    </div>
</div>
<!--脚部-->

<div class="footer3">
    <div class="f3_top">
        <div class="f3_center">
            <div class="ts1">品目繁多 愉悦购物</div>
            <div class="ts2">正品保障 天天低价</div>
            <div class="ts3">极速物流 特色定制</div>
            <div class="ts4">优质服务 以客为尊</div>
        </div>
    </div>
    <div class="f3_middle">
        <ul class="f3_center">
            <li class="f3_mi_li01">
                <h1>购物指南</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>配送方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>支付方式</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>售后服务</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li01">
                <h1>服务保障</h1>
                <p>常见问题</p>
                <p>找回密码</p>
                <p>会员介绍</p>
                <p>购物演示</p>
            </li>
            <li class="f3_mi_li06">
                <h1>客服中心</h1> <img src="images/qrcode_jprj.jpg" width="80px"
                                   height="80px">
                <p>抢红包、疑问咨询、优惠活动</p>
            </li>
        </ul>
    </div>
    <div class="f3_bottom">
        <p class="f3_links">
            <a href="#">关于我们</a>| <a href="#">联系我们</a>| <a href="#">友情链接</a>| <a
                href="#">供货商入驻</a>
        </p>
        <p>桂ICP备2020007031号 工具人toolman版权所有 Toolman科技有限公司</p>
        <img src="images/police.png">
    </div>
</div>
</body>
</html>
    